<script setup>
import request from "@/utils/request";
import {reactive} from "vue";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 系统数据
 *
 * @type {UnwrapNestedRefs<{tableData: *[]}>}
 */
const systemData = reactive({
    tableData: [],
})

/**
 * 加载系统
 */
const loadSystem = () => {
    request.get(`/api/system/get-system-parameter`, {}).then(res => {
        systemData.tableData = res.data || []
    })
}

/**
 * 每个1秒请求一次
 */
setInterval(() => {
    loadSystem()
}, 1000);
</script>

<template>
    <div v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
        <div class="card" style="margin-top: 10px;">
            <div>
                <el-table :data="systemData.tableData" style="width: 100%">
                    <el-table-column prop="cpuArch" label="CPU架构"/>
                    <el-table-column prop="osName" label="操作系统"/>
                    <el-table-column prop="browserType" label="浏览器类型"/>
                    <el-table-column prop="ipAddress" label="IP地址"/>
                </el-table>
            </div>
        </div>
        <div class="card" style="margin-top: 25px;">
            <div>
                <el-table :data="systemData.tableData" style="width: 100%">
                    <el-table-column prop="jdkVersion" label="JDK版本"/>
                    <el-table-column prop="jvmName" label="JVM虚拟机"/>
                    <el-table-column prop="jvmStartTime" label="JVM启动时间"/>
                    <el-table-column prop="jvmUpTime" label="JVM运行时长"/>
                </el-table>
            </div>
        </div>
        <div class="card" style="margin-top: 25px;">
            <div>
                <el-table :data="systemData.tableData" style="width: 100%">
                    <el-table-column prop="heapMemoryInit" label="堆内存初始情况"/>
                    <el-table-column prop="heapMemoryUsed" label="堆内存使用情况"/>
                    <el-table-column prop="heapMemoryCommitted" label="堆内存占用情况"/>
                </el-table>
            </div>
        </div>
        <div class="card" style="margin-top: 25px;">
            <div>
                <el-table :data="systemData.tableData" style="width: 100%">
                    <el-table-column prop="nonHeapMemoryInit" label="非堆内存初始情况"/>
                    <el-table-column prop="nonHeapMemoryUsed" label="非堆内存使用情况"/>
                    <el-table-column prop="nonHeapMemoryCommitted" label="非堆内存占用情况"/>
                </el-table>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>